<template>
	<view class="con">
		<!-- tab -->
		<view class="tab flex">
			<view class="tabli" :class="selectCodeId===item.id?'active':''" v-for="(item,index) in tabList" :key="index"	@click="changTab(item.id)">
				<view class="tablic_1">{{item.title}}</view>
				<view class="tablic_2"></view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="rem">
			<view class="tuijian flex flex_between">
				<view class="tuijianli" v-for="(item,index) in courseList" :key="index" @click="goProductDetail(item)">
					<image class="tuijianli_img" :src="item.pic" mode="widthFix"></image>
					<view class="tuijianli_c">
						<view class="remcz_1 remcz_1_te">{{item.title}}</view>
						<!-- <view class="remcz_4_1">￥<text>980</text></view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
  import {
    getcodeCode,//获取分类
    getcodeList//分类下课程列表
  } from '@/request/api.js'
	export default {
		data() {
			return {
				selectCodeId: 0,//选择的分类导航Id
				tabList: [], //分类导航
        courseList:[] //课程列表
			}
		},
		onLoad(options) {
      console.log('进入课程分类页--获取options')
      const q = decodeURIComponent(options.q) // 获取到二维码原始链接内容
      console.log(options)
      console.log(options.pid)
      console.log(q)
      if (options.pid) {
      	// 通过分享页面进的
      	console.log('通过分享页面进的')
      	uni.setStorageSync('pid', options.pid)
      
      } else if (q) {
      	// 通过扫描二维码进的
      	console.log('通过扫描二维码进的')
      	var match = q.match(/\?(.+)/);
      	if (match && match.length > 1) {
      		var queryString = match[1].split("=")[1]; // 获取到的查询字符串
      		console.log('pid是多少'); // 输出: data=12345
      		console.log(queryString); // 输出: data=12345
      		uni.setStorageSync('pid', queryString)
      	} else {
      		console.log('No query string found.');
      	}
      }
		},
    onShow() {
      this.getcodeCodeFun() // 获取分类
      this.isLogin = uni.getStorageSync('isLogin') || 1
      if (this.isLogin === 1) {
      	console.log('未授权登录')
        uni.hideShareMenu()
      }else{
        uni.showShareMenu({
        	withShareTicket: true,
        	menus: ["shareAppMessage", "shareTimeline"]
        })
      }
    },
		methods: {
      // 获取分类导航
      getcodeCodeFun(){
        getcodeCode().then(res=>{
          console.log('获取分类')
          console.log(res)
          if (res.error_code === 0) {
            this.tabList = res.data
            this.selectCodeId = res.data[0].id
            this.getcodeListFun();
          }else{
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },
      // 分类下课程列表
      getcodeListFun(){
        this.courseList = []
        let param = {
          code:this.selectCodeId
        }
        getcodeList(param).then(res=>{
          console.log('分类下课程列表')
          console.log(res)
          if (res.error_code === 0) {
            this.courseList = res.data.arrList
            // this.tabList = res.data
            // this.selectCodeId = res.data[0].id
          }else{
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },
      // 进入-产品详情页
      goProductDetail(item) {
        console.log(item)
        if(item.id===0||item.id==='0'){
          return
        }
      	uni.navigateTo({
      		url: '/packageA/index/productDetail?id=' + item.id +'&title=' + item.title
      	})
      },
			changTab(id) {
				this.selectCodeId = id
        this.getcodeListFun();
			}
		},
    // 分享微信好友
    onShareAppMessage(event) {
      console.log(event);
      return {
        title: '陌上未来，全程保姆式陪跑',
        path: '/pages/classification/index?pid=' + uni.getStorageSync('userInfo').id,
        // imageUrl: imageUrl
      }
    },
    //分享到朋友圈
    onShareTimeline(event) {
      console.log(event);
      return {
        title: '陌上未来，全程保姆式陪跑',
        path: '/pages/classification/index?pid=' + uni.getStorageSync('userInfo').id,
        query: 'pid=' + uni.getStorageSync('userInfo').id,
        // imageUrl: imageUrl
      }
    }
	}
</script>

<style scoped lang="scss">
	.con {
		.tab {
			padding: 40rpx;
      padding-top: 20rpx;
			width: 100%;
			box-sizing: border-box;

			.tabli {
				margin-right: 64rpx;
				color: #9b9b9b;
				font-size: 32rpx;
				text-align: center;
			}
			.tablic_1{
	height: 44rpx;
}

			.tabli.active .tablic_1 {
				color:#000;
        font-weight: bold;
				position: relative;
				top: 4rpx;
			}

			.tabli.active .tablic_2 {
				width: 50rpx;
				height: 6rpx;
				background-color: rgba(249, 191, 65, 1);
				margin: 0 auto;
				position: relative;
				top: 8rpx;
			}
		}

		.tuijian {
			width: 100%;
			height: auto;
			flex-wrap: wrap;

			.tuijianli {
				width: 346rpx;
				height: auto;
				background: #fff;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.tuijianli_img {
					width: 100%;
					height: auto;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
          display: block;
				}

				.tuijianli_c {
					width: 100%;
					height: auto;
					padding: 30rpx 30rpx;
					box-sizing: border-box;

					.remcz_1_te {
						// margin-bottom: 30rpx;
						font-size: 28rpx;
					}
				}
			}
		}

		.rem {
			// padding: 0 20rpx;
			width: 100%;
			box-sizing: border-box;
		}

		.remcz_4_1 {
			color: rgba(16, 16, 16, 1);
			font-size: 24rpx;
			margin-left: -4rpx;

			text {
				font-family: 'AvantGardeFont';
				font-size: 34rpx;
			}
		}
	}
</style>